<template>
  <div>
    <!--首页轮播图-->
    <Carousel/>
    <!--搜索框-->
    <Search/>
    <!--底部展示-->
    <el-row :gutter="20">
      <!--左侧-->
      <el-col :span="20">
        <!--等级-->
        <Level @getLevel="getLevel"/>
        <!--地区-->
        <Region @getRegion="getRegion"/>
        <!--医院-->
        <div class="hospital" v-if="hospitalList.length>0">
          <Card class="item" v-for="item in hospitalList" :key="item.id" :hospitalInfo="item">
          </Card>
        </div>
        <div v-else class="no-data">
          <el-empty description="暂无数据"/>
        </div>
        <!--分页-->
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30, 40]"
            :background="true"
            layout="prev, pager, next, jumper,->,sizes,total"
            :total="totalHospitalNum"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            width="800px"
        />
      </el-col>
      <!--右侧-->
      <el-col :span="4">
        <Tip/>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import {onMounted, ref} from 'vue'
import Carousel from '@/pages/home/carousel/index.vue'
import Search from '@/pages/home/search/index.vue'
import Level from '@/pages/home/level/index.vue'
import Region from '@/pages/home/region/index.vue'
import Card from '@/pages/home/card/index.vue'
import {reqHospitalLevelOrRegion, reqHospitalList} from "@/api/home";
import {Content} from "@/api/home/type.ts";
import Tip from '@/pages/home/tip/index.vue'

//分页器需要的数据
//当前页码
const currentPage = ref<number>(1)
//每页数据条数
const pageSize = ref<number>(5)
//医院列表数据
const hospitalList = ref<Content>([])
//医院总个数
const totalHospitalNum = ref<number>(0)
//医院等级
const hostype = ref<string>('')
//地区
const districtCode = ref<string>('')

onMounted(() => {
  getHospitalList();
})

//获取医院列表
const getHospitalList = async () => {
  const result = await reqHospitalList(currentPage.value, pageSize.value, hostype.value, districtCode.value)
  console.log(result)
  hospitalList.value = result.data.content
  totalHospitalNum.value = result.data.totalElements
}
//页码变化时触发
const handleCurrentChange = async () => {
  await getHospitalList()
}
//每页条数变化时触发
const handleSizeChange = async () => {
  await getHospitalList()
}
//获取子组件传递的医院等级
const getLevel = (level:string) => {
  hostype.value = level
  getHospitalList()
}
//获取子组件传递的地区
const getRegion = (region:string) => {
  districtCode.value = region
  getHospitalList()
}
</script>

<style scoped lang="scss">
.hospital {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .item {
    width: 48%;
    margin: 10px 0;
  }
}
</style>
